<template>
  <view class="booking-time flex flex-col min-w-0 box-border">
    <u-swiper :list="image" circular height="320rpx" indicator indicatorMode="line" width="100%" />

    <u-notice-bar :custom-style="{ flex: 'none' }" :text="projectDetails.bkiHint" url="/pages/componentsB/tag/tag" />

    <view class="boxShadow">
      <u-scroll-list :indicator="false">
        <view class="scroll-list">
          <view
            v-for="(item, index) in list"
            :key="item.time"
            :class="{ 'active-color': activeIndex === index }"
            class="scroll-list__goods-item relative"
            @tap="updateProjectIndex(index, item.time, item.week)"
          >
            <!--<u-badge :custom-style="{ position: 'absolute', top: 0, right: 0 }" :value="1" max="99" />-->
            <view>{{ item.week }}</view>
            <view class="scroll-list__goods-item__text whitespace-nowrap">
              {{ item.timeLabel }}
            </view>
          </view>
          <view v-if="list.length < daysDifference" class="scroll-list__show-more" @tap="viewMore">
            <text class="scroll-list__show-more__text">查看更多</text>
            <u-icon color="#f56c6c" name="arrow-leftward" size="12" />
          </view>
        </view>
      </u-scroll-list>
    </view>

    <view class="flex-1">
      <view id="tableBox" class="table-content">
        <template v-if="projectDetails.bkipPriceType === 1">
          <basic-table
            :border="false"
            :columns="columns"
            :data="projectDetails.bookingSitePriceBo"
            :header-row-style="{ fontSize: '16px' }"
            :height="tableHeight"
            :min-item-width="96"
            :row-style="{ height: '56rpx' }"
            align="center"
          >
            <template #item="{ column, scope }">
              <view
                v-if="column.fieldName !== 'timeDivision'"
                :class="`rowClass-${scope[column.fieldName].status}`"
                class="h-[56rpx] rounded"
                @click="selectedPrice(column, scope)"
              >
                <view class="h-full flex items-center justify-center">
                  {{ scope[column.fieldName].priceLabel }}
                  <image class="w-[20rpx] h-[20rpx] check-circle" src="/static/image/selected.png" />
                </view>
              </view>
            </template>
          </basic-table>
          <view class="flex items-center ml-16 pt-3 pb-3">
            <view class="rowClass-0 w-14 text-center ml-2 text-xs rounded">可预约</view>
            <view class="rowClass-2 w-14 text-center ml-2 text-xs rounded mr-2">已预约</view>
            <view class="text-center text-xs">一次最多选中两个场次</view>
          </view>
        </template>

        <template v-else>
          <div :style="{ height: tableHeight }" class="overflow-auto">
            <div class="grid grid-cols-2 gap-2">
              <div
                v-for="(item, index) in voteTypeList"
                :key="index"
                :class="{ activeTypeColor: activeTypeIndex === item.dictValue }"
                class="text-xs p-2 bg-gray-100 rounded flex items-center justify-center text-[#606266]"
                @tap="selectedType(item.dictValue)"
              >
                {{ item.dictLabel }}
              </div>
            </div>

            <div
              v-for="(item, index) in perSessionDataList"
              :key="index"
              :class="{
                activeTypeColor: perSessionColorList.map((item) => item.bkiSitePriceId).includes(item.id),
                disabledColor: isDisabled(item)
              }"
              class="text-xs p-2 bg-gray-100 rounded w-[300rpx] flex items-center justify-center mt-2 text-[#606266]"
              @tap="sessionDataChange(item)"
            >
              {{ item.timeDivision }}-{{ item.timeEndDivision }} 进入 ({{ item.price === 0 ? '免费' : item.price }})
            </div>

            <view class="divider"></view>
            <view class="code-flex-row code-justify-between group_6 mb-4 items-center">
              <text class="font_3">数量</text>
              <!--<text class="code-mt-8 font_4 text_13">-->
              <!--  单人票每笔订单限购{{ projectDetails.bkiBuyOrderNum }}张，团体票不限-->
              <!--</text>-->
              <u-number-box v-if="activeTypeIndex === 1" v-model="votes" :max="projectDetails.bkiBuyOrderNum" />
              <u-number-box v-else v-model="votes" />
            </view>
            <view class="divider"></view>
            <view class="p-2">
              <view class="flex items-center justify-between">
                <view class="text-xl">填写预约人信息</view>
                <u-button type="primary" @click="openPersonnelAddition(true)">新增游客</u-button>
              </view>
              <template v-if="userList.length">
                <view
                  v-for="(item, index) in userList"
                  :key="index"
                  class="border border-gray-100 rounded flex items-center justify-between p-2 mt-2"
                >
                  <view>
                    <text class="font-bold">{{ item.bkiUseUserName }}</text>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <text>性别</text>
                      <view class="ml-2">{{ item.bkiUserSex }}</view>
                    </view>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <text>年龄</text>
                      <view class="ml-2">{{ calculateAge(item.bkiUserIdentity) }}岁</view>
                    </view>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <text>身份证</text>
                      <view class="ml-2">{{ item.bkiUserIdentity }}</view>
                    </view>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <view>手机号</view>
                      <view class="ml-2">{{ item.bkiUserPhone }}</view>
                    </view>
                  </view>
                  <view>
                    <text class="material-icons text-zinc-300" @tap="deleteUserInfo(index)">delete</text>
                  </view>
                </view>
              </template>
              <template v-else>
                <u-empty mode="list" />
              </template>
            </view>
          </div>
        </template>
      </view>
    </view>

    <u-notify ref="uNotify" />
    <u-modal :show="show" content="星期一不可预约请重新选择" title="提醒" @confirm="show = false"></u-modal>
    <view
      class="bg-white z-50 font-bold flex items-center justify-between p-5 fixed bottom-0 left-0 w-full shadow-neutral-600 shadow-2xl"
    >
      <template v-if="projectDetails.bkipPriceType === 1">
        <view>
          共选中
          <text class="text-red-500">{{ selectedPriceList.length }}</text>
          场，合计：
          <text class="text-red-500">￥{{ priceSum }}</text>
        </view>
        <u-button shape="circle" type="primary" @click="routerPath">确认场次</u-button>
      </template>

      <template v-else>
        <view>
          共选择
          <text class="text-red-500">{{ votes }}</text>
          张，合计：
          <text class="text-red-500">￥{{ perSessionPriceSum }}</text>
        </view>
        <u-button shape="circle" type="primary" @click="multiplayerRouterPath">确认场次</u-button>
      </template>
    </view>

    <u-loading-page :loading="loading" loading-text="loading..." />

    <PersonnelAddition :show="showPersonnelAdditionPopup" @close="openPersonnelAddition(false)" @submit="submit" />
  </view>
</template>

<script lang="ts" setup>
import { useSubscribeStore } from '@/stores/subscribe';
import dayjs from 'dayjs';
import { SUBSCRIBE } from '@/api/subscribe';
import { RequestInterface } from '@/typings/request';
import { calculateDaysDifference, convertToHoursMinute, hourMinuteSecond } from '@/utils/date';
import { useUserStore } from '@/stores/user';
import { ref } from 'vue';
import currency from 'currency.js';
import { debounce } from 'xe-utils';
import { DICTIONARY_CONFIGURATION } from '@/constants/base';
import { PUBLIC_API } from '@/api/publicApi';
import PersonnelAddition from '@/components/personnelAddition/personnelAddition.vue';
import { calculateAge } from '@/utils/common';
import { PLAY } from '@/api/play';

const show = ref(false);
const { proxy } = getCurrentInstance();
const $http: RequestInterface = inject('$http') as RequestInterface;
const subscribeStore = useSubscribeStore();
const { user } = storeToRefs(useUserStore());
const activeIndex = ref(0);

const exclusionField = ['timeDivision', 'id', 'bkipStartTime', 'bkipEndTime'];

// 跳转到预约场次
const updateProjectIndex = (index, time, week) => {
  if (week === '星期一') {
    show.value = true;
    return;
  }
  activeIndex.value = index;

  if (projectDetails.value.bkipPriceType === 1) {
    getProjectClasses(time).then((data) => {
      const ids = data.map((item) => item.bkiSitePriceId);
      // 状态判断
      const statusNumber = (id) => {
        // 如果已经预约那就是最大的状态就先改为状态为预约
        if (ids.indexOf(id) > -1) {
          return 2;
        } else {
          // 如果选中的id和id和选中时间和当前时间相同，就改变状态
          const selectedIndex = selectedPriceList.value.findIndex(
            (item) => item.bkiDateTime === time && item.bkiSitePriceId === id
          );
          return selectedIndex > -1 ? 1 : 0;
        }
      };
      projectDetails.value.bookingSitePriceBo = projectDetails.value.bookingSitePriceBo.map((params) => {
        for (const key in params) {
          if (exclusionField.indexOf(key) === -1) {
            params[key].status = statusNumber(params[key].id);
          }
        }
        return params;
      });
    });
  } else {
    getProjectPeopleSession(time).then((data) => {
      perSessionDataList.value = data.reduce((pro, cur) => {
        if (pro[cur.bkipNum]) {
          pro[cur.bkipNum] = {
            ...pro[cur.bkipNum],
            [cur.bkipSite]: cur.bkipPrice / 100
          };
        } else {
          pro.push({
            [cur.bkipSite]: cur.bkipPrice / 100,
            ...cur,
            timeDivision: convertToHoursMinute(cur.bkipStartTime),
            timeEndDivision: convertToHoursMinute(cur.bkipEndTime),
            price: cur.bkipPrice / 100,
            selfGroupTicketNum: cur.bkipTicketGroupNum - cur.residueTicketGroupNum,
            selfTicketNum: cur.bkipTicketNum - cur.residueTicketNum
          });
        }
        return pro;
      }, []);
    });
    perSessionColorList.value = [];
  }
};

const num = ref(1);

const currentDate = dayjs();

const generateDayInfo = (date) => {
  return {
    time: date.format('YYYYMMDD'),
    week: date.format('dddd'),
    timeLabel: date.format('MM月D号')
  };
};

const list = computed(() => {
  const arr = [];

  for (let i = 0; i < num.value; i++) {
    const date = i === 0 ? currentDate : currentDate.add(i, 'day');
    arr.push(generateDayInfo(date, i));
  }
  return arr;
});

const daysDifference = computed(() => {
  return calculateDaysDifference(dayjs().format('YYYYMMDD'), projectDetails.value.bkiToEndTime);
});

const viewMore = () => {
  if (num.value >= 14) {
    uni.$u.toast('暂时只支持预约未来2周！');
    return;
  }
  num.value += daysDifference.value - num.value >= 7 ? 7 : daysDifference.value - num.value;
};

const projectDetails = ref({});

// 头部图片
const image = computed(() => {
  const newBkiFileTop = JSON.parse(projectDetails.value.bkiFileTop || '[]');
  return newBkiFileTop.map((item) => item.path);
});

// 获取项目详情
const getProjectDetails = () => {
  return new Promise((resolve, reject) => {
    $http.post({
      url: SUBSCRIBE.RESERVATION_DETAILS,
      data: { id: subscribeStore.projectDetails.id },
      success: (res) => {
        resolve(res);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

// 获取项目的课节占用
const getProjectClasses = (time) => {
  return new Promise((resolve, reject) => {
    $http.post({
      url: SUBSCRIBE.QUERY_TIME_OCCUPATION_THE_SESSION,
      data: { bkiStartTime: time, id: subscribeStore.projectDetails.id },
      success: (res) => {
        resolve(res);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

// 获取一节多人的占用
const getProjectPeopleSession = (time) => {
  return new Promise((resolve, reject) => {
    $http.post({
      url: SUBSCRIBE.LIST_BOOKING_SITE_TICKET_RESIDUE,
      data: { bkiStartTime: time, id: subscribeStore.projectDetails.id },
      success: (res) => {
        resolve(res);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

const columns = ref([]);

const loading = ref(false);
const tableHeight = ref('');

// 一节一人
const initData = () => {
  loading.value = true;

  Promise.all([getProjectDetails(), getProjectClasses(list.value[activeIndex.value].time)])
    .then((res) => {
      const [details, fieldOccupancy] = res;
      const ids = fieldOccupancy.map((item) => item.bkiSitePriceId);
      details.bkiStartTime = convertToHoursMinute(details.bkiStartTime);
      details.bkiEndTime = convertToHoursMinute(details.bkiEndTime);
      details.bkiOneTime = convertToHoursMinute(details.bkiOneTime);

      details.bookingSitePriceBo = details.bookingSitePriceVo.reduce((pro, cur) => {
        if (pro[cur.bkipNum]) {
          pro[cur.bkipNum] = {
            ...pro[cur.bkipNum],
            [cur.bkipSite]: {
              price: cur.bkipPrice / 100,
              priceLabel: cur.bkipPrice === '0' ? '免' : `￥${cur.bkipPrice / 100}`,
              status: ids.indexOf(cur.id) > -1 ? 2 : 0, // status 0:未选中，1.选中,2.已预约
              id: cur.id,
              bkipStartTime: cur.bkipStartTime,
              bkipEndTime: cur.bkipEndTime
            }
          };
        } else {
          pro.push({
            [cur.bkipSite]: {
              price: cur.bkipPrice / 100,
              priceLabel: cur.bkipPrice === '0' ? '免' : `￥${cur.bkipPrice / 100}`,
              status: ids.indexOf(cur.id) > -1 ? 2 : 0,
              id: cur.id,
              bkipStartTime: cur.bkipStartTime,
              bkipEndTime: cur.bkipEndTime
            },
            timeDivision: convertToHoursMinute(cur.bkipStartTime)
          });
        }
        return pro;
      }, []);

      const newColumns = [];

      const oneColumn = {
        fieldName: 'timeDivision',
        fieldDesc: '',
        width: '70',
        fixed: 'left'
      };
      Object.keys(details.bookingSitePriceBo[0]).forEach((field) => {
        if (exclusionField.indexOf(field) === -1) {
          newColumns.push({
            fieldName: String(field),
            fieldDesc: field,
            fieldType: 'slot'
          });
        }
      });

      columns.value = newColumns;

      columns.value.unshift(oneColumn);

      projectDetails.value = details;

      const daysDifference = calculateDaysDifference(dayjs().format('YYYYMMDD'), projectDetails.value.bkiToEndTime);
      num.value = daysDifference > 7 ? 7 : daysDifference;
      // 根据不同的手机计算高度
      const query = wx.createSelectorQuery(); // 创建节点选择器
      query
        .select('#tableBox')
        .boundingClientRect(function (rect) {
          const bottomHeight = 45;
          tableHeight.value = `${rect.height - bottomHeight}px`;
        })
        .exec();
    })
    .finally(() => {
      loading.value = false;
    });
};

const perSessionDataList = ref([]);
// 初始化加载一节多人
const initPerSessionData = () => {
  loading.value = true;

  Promise.all([getProjectDetails(), getProjectPeopleSession(list.value[activeIndex.value].time)])
    .then((res) => {
      const [details, fieldOccupancy] = res;
      details.bkiStartTime = convertToHoursMinute(details.bkiStartTime);
      details.bkiEndTime = convertToHoursMinute(details.bkiEndTime);
      details.bkiOneTime = convertToHoursMinute(details.bkiOneTime);

      projectDetails.value = details;
      perSessionDataList.value = fieldOccupancy.reduce((pro, cur) => {
        if (pro[cur.bkipNum]) {
          pro[cur.bkipNum] = {
            ...pro[cur.bkipNum],
            [cur.bkipSite]: cur.bkipPrice / 100
          };
        } else {
          pro.push({
            [cur.bkipSite]: cur.bkipPrice / 100,
            ...cur,
            timeDivision: convertToHoursMinute(cur.bkipStartTime),
            timeEndDivision: convertToHoursMinute(cur.bkipEndTime),
            price: cur.bkipPrice / 100,
            selfGroupTicketNum: cur.bkipTicketGroupNum - cur.residueTicketGroupNum,
            selfTicketNum: cur.bkipTicketNum - cur.residueTicketNum
          });
        }
        return pro;
      }, []);
      const daysDifference = calculateDaysDifference(dayjs().format('YYYYMMDD'), projectDetails.value.bkiToEndTime);
      num.value = daysDifference > 7 ? 7 : daysDifference;
      // 根据不同的手机计算高度
      const query = wx.createSelectorQuery(); // 创建节点选择器
      query
        .select('#tableBox')
        .boundingClientRect(function (rect) {
          const bottomHeight = 260;
          tableHeight.value = `${rect.height - bottomHeight}px`;
        })
        .exec();
    })
    .finally(() => {
      loading.value = false;
    });
};

// 路由跳转
const routerPath = debounce(() => {
  if (!selectedPriceList.value.length) {
    uni.$u.toast('请选择场次！');
    return;
  }
  // 如果有id才能掉接口
  if (user.value.id) {
    uni.showLoading({
      title: '场次锁定中...',
      mask: true
    });

    // 在这一步去新加用户id，因为可能会有用户id没有的情况，所以我选择在确认的时候先看一眼，如果没有我就跳到注册，然后追加id
    const newSelectedPriceList = selectedPriceList.value.map((item) => ({ ...item, bkiUserId: user.value.id }));

    $http.post({
      url: SUBSCRIBE.SAVEUSER_BOOKING_SITE,
      data: JSON.stringify({
        orderNo: subscribeStore.userBookingSiteBos.orderNo, // 上一次订单号给后端用于删除上一个订单
        bkiCarNo: subscribeStore.parkingSpaceInfo.toString(),
        bkiCarNum: subscribeStore.parkingSpaceInfo.length,
        userBookingSiteBos: newSelectedPriceList
      }),
      success: (res) => {
        // 存入pina
        subscribeStore.setUserBookingSiteBos(res);
        // 跳转到支付页面
        uni.$u.route({
          url: '/pages/subscribe/advanceOrder'
        });
      },
      fail: (res) => {
        if (res.data.code === 13010) {
          initData();
        }
      },
      complete: () => {
        // 不管成功还是失败都要关闭loading
        uni.hideLoading();
      }
    });
  } else {
    // 跳转到登录页面
    uni.$u.route({
      url: '/pages/login/login'
    });
  }
}, 300);

// 路由跳转
const multiplayerRouterPath = debounce(() => {
  if (votes.value !== userList.value.length) {
    uni.$u.toast('预约人信息应该等于票数，请重新填写！');
    return;
  }
  if (!perSessionColorList.value.length) {
    uni.$u.toast('请选择场次！');
    return;
  }

  // 如果有id才能掉接口
  if (user.value.id) {
    uni.showLoading({
      title: '场次锁定中...',
      mask: true
    });

    // 在这一步去新加用户id，因为可能会有用户id没有的情况，所以我选择在确认的时候先看一眼，如果没有我就跳到注册，然后追加id
    const newSelectedPriceList = perSessionColorList.value.map((item) => ({
      ...item,
      bkiUserId: user.value.id,
      bkiNum: votes.value
    }));

    $http.post({
      url: SUBSCRIBE.SAVE_USER_BOOKING_SITE_MUCH,
      data: JSON.stringify({
        bkiUserIdentityList: userList.value.map((item) => item.bkiUserIdentity),
        bkiUserNameList: userList.value.map((item) => item.bkiUseUserName),
        bkiUserPhoneList: userList.value.map((item) => item.bkiUserPhone),
        bkiUserSexList: userList.value.map((item) => item.bkiUserSex),
        orderNo: subscribeStore.userBookingSiteBos.orderNo, // 上一次订单号给后端用于删除上一个订单
        userBookingSiteBos: newSelectedPriceList
      }),
      success: (res) => {
        payment(res.orderNo);
      },
      fail: (res) => {
        if (res.data.code === 13010) {
          initPerSessionData();
        }
      },
      complete: () => {
        // 不管成功还是失败都要关闭loading
        uni.hideLoading();
      }
    });
  } else {
    // 跳转到登录页面
    uni.$u.route({
      url: '/pages/login/login'
    });
  }
}, 300);

// 开始支付
const payment = (orderNo) => {
  $http.get({
    url: `${PLAY.WECHAT_PAY_ZERO}${orderNo}`,
    success: () => {
      uni.$u.toast('预约成功');
      uni.$u.route({
        type: 'reLaunch',
        url: '/pages/order/index'
      });
    }
  });
};

const selectedPriceList = ref([]);

const priceSum = computed(() => {
  return selectedPriceList.value.reduce((pro, cur) => {
    pro = currency(pro).add(cur.bkiSitePrice);
    return pro;
  }, 0);
});

// 多人一场价格
const perSessionPriceSum = computed(() => {
  return perSessionDataList.value.reduce((pro, cur) => {
    pro = currency(pro).add(cur.price);
    return pro;
  }, 0);
});

// 选择价格
const selectedPrice = (column, rowParams) => {
  // 单元格数据
  const cellParams = rowParams[column.fieldName];

  // 判断该价格单元格是否已经预约过
  if (cellParams.status === 2) {
    proxy.$refs.uNotify.show({
      type: 'warning',
      message: '该时间段已经被预约过了,请选择其他时间段',
      duration: 1000 * 3,
      fontSize: 15,
      safeAreaInsetTop: false
    });
    return;
  }

  // 当前时间
  const selfTime = list.value[activeIndex.value].time;

  // 获取到索引
  const index = selectedPriceList.value.findIndex(
    (item) => item.bkiSitePriceId === cellParams.id && item.bkiDateTime === selfTime
  );

  // 如果重新选择之前的就要删除
  if (index > -1) {
    selectedPriceList.value.splice(index, 1);
    cellParams.status = 0;
  } else {
    // 如果以及满两个就要提醒用户
    if (selectedPriceList.value.length === 2) {
      uni.$u.toast('最多选择2个场地时间');
    } else {
      cellParams.status = 1;
      const time = list.value[activeIndex.value].time;
      // 如果不足两个就要新增一个
      selectedPriceList.value.push({
        bkiSiteId: projectDetails.value.id, // 预约场地id
        bkiSitePriceId: cellParams.id, // 价格id
        bkiDateTime: time, // 当天时间
        bkiSitePrice: cellParams.price, // 价格
        bkiEndTime: `${time}${cellParams.bkipEndTime}`,
        bkiStartTime: `${time}${cellParams.bkipStartTime}`,
        bkiHourTime: hourMinuteSecond(rowParams.timeDivision)
      });
    }
  }
};

const voteTypeList = ref([]);

//  获取票数类型
const getPriceTypeList = () => {
  $http.get({
    url: PUBLIC_API.LIST_DICT_DATA_BY_TYPE,
    data: { dictType: DICTIONARY_CONFIGURATION.VOTE_TYPE },
    success: (res) => {
      voteTypeList.value = res.slice(0, 2);
      activeTypeIndex.value = res[0].dictValue;
    }
  });
};

const activeTypeIndex = ref(1);

const selectedType = (type) => {
  activeTypeIndex.value = type;
  perSessionColorList.value = [];
  votes.value = 1;
};

const perSessionColorList = ref([]);

const sessionDataChange = (item) => {
  if (isDisabled(item)) {
    uni.$u.toast('暂无余票');
  } else {
    const time = list.value[activeIndex.value].time;
    perSessionColorList.value = [
      {
        bkiSiteId: projectDetails.value.id, // 预约场地id
        bkiSitePriceId: item.id, // 价格id
        bkiDateTime: time, // 当天时间
        bkiSitePrice: item.price, // 价格
        bkiEndTime: `${time}${item.bkipEndTime}`,
        bkiStartTime: `${time}${item.bkipStartTime}`,
        bkiHourTime: hourMinuteSecond(item.timeDivision),
        bkiTicketType: activeTypeIndex.value
      }
    ];
  }
};

// 计算单体票和团体票是否选择
const isDisabled = (params) => {
  if (activeTypeIndex.value === 1) {
    return params.selfTicketNum === 0;
  } else {
    return params.selfGroupTicketNum === 0;
  }
};

// 票数
const votes = ref(1);

const showPersonnelAdditionPopup = ref(false);

const openPersonnelAddition = (flag) => {
  console.log(flag);
  showPersonnelAdditionPopup.value = flag;
};

const userList = ref([]);

const submit = (params) => {
  showPersonnelAdditionPopup.value = false;
  const index = userList.value.findIndex((item) => item.bkiUserIdentity === params.bkiUserIdentity);
  if (index === -1) {
    userList.value.push(params);
  } else {
    uni.$u.toast('不能提交重复的身份证');
  }
};

const deleteUserInfo = (index) => {
  userList.value.splice(index, 1);
};

onReady(() => {
  if (subscribeStore.projectDetails.bkipPriceType === 2) {
    initPerSessionData();
    getPriceTypeList();
  } else {
    initData();
  }
});
</script>

<style lang="scss" scoped>
.booking-time {
  height: 100vh;
}

.scroll-list {
  @include flex;
  height: 50px;

  &__goods-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10rpx;
    background-color: rgb(255, 255, 255);
    min-width: 135rpx;

    &__text {
      text-align: center;
      font-size: 20rpx;
      margin-top: 5px;
    }
  }

  &__show-more {
    background-color: #fff0f0;
    border-radius: 3px;
    padding: 3px 6px;
    min-width: 125rpx;

    @include flex(column);
    align-items: center;

    &__text {
      @apply text-xs;
      color: #f56c6c;
      line-height: 16px;
    }
  }

  .active-color {
    color: #409eff;
    background-color: rgba(64, 158, 255, 0.1);
  }
}

:deep(.u-scroll-list) {
  .u-scroll-list__scroll-view {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
  }

  .u-scroll-list__indicator {
    margin-top: 5rpx;
  }
}

.table-content {
  height: calc(100% - 153rpx);
  overflow: auto;
}

.rowClass-0 {
  border: 1px solid #e5e5e5;
  color: #a9a1a1;
}

.rowClass-2 {
  background-color: rgb(254, 156, 75);
  color: #ffffff;
}

.rowClass-1 {
  background-color: rgb(229, 239, 255);
  border: 1px solid rgb(23, 114, 255);
  color: rgb(75, 146, 255);

  .check-circle {
    display: block;
  }
}

.check-circle {
  position: absolute;
  display: none;
  font-size: 30rpx;
  color: rgb(75, 146, 255);
  right: 8px;
  top: 2px;
}

.activeTypeColor {
  @apply text-[#409eff] bg-[#ecf5ff];
}

.disabledColor {
  @apply text-[#c0c4cc];
}

.divider {
  margin-top: 50rpx;
  background-color: #e2e2eb;
  height: 2rpx;
}

.group_6 {
  margin-top: 50rpx;
  padding: 0 20rpx;

  .group_8 {
    margin-top: 2.28rpx;

    .text_13 {
      line-height: 22.32rpx;
    }

    .font_4 {
      font-size: 24rpx;
      font-family: PingFang;
      line-height: 20.46rpx;
      font-weight: 300;
      color: #696975;
    }
  }
}
</style>
